<template>
  <div class="login">
    <van-nav-bar
      title="手机号登陆"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="login-container">
      <div class="login-form">
        <form @submit.prevent>
          <div class="input-group">
            <label for="phone">手机号</label>
            <input type="text" id="phone" name="phone" v-model="mobile" placeholder="请输入手机号" />
          </div>
          <div class="input-group">
            <label for="captcha2">获取短信验证码</label>
            <div class="captcha-container">
              <input type="text" id="captcha2" name="captcha2" v-model="msgCaptcha" placeholder="请输入短信验证码" />
              <button type="submit" class="btn1" @click="getCode" :disabled="isCount">{{ sumTime==currentTime?"获取短信验证码":currentTime+"后重新发送" }}</button>
            </div>
          </div>
          <button type="submit" class="btn" @click="login" >登录</button>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request.js'
// import axios from 'axios'
export default {
  name: 'loginIndex',
  data () {
    return {
      sumTime: '60',
      currentTime: '60',
      isCount: false,
      timer: null,
      mobile: '',
      msgCaptcha: ''
    }
  },

  created () {
  },
  mounted () {

  },
  methods: {
    async getCode () {
      if (this.mobile === '') {
        this.$toast.fail('手机号不能为空')
        return
      }
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.mobile)) {
        this.$toast.fail('请输入正确的手机号')
        return
      }
      // console.log('发送请求前 mobile 的值：', this.mobile)
      // 发送请求获取验证码
      const res = await request.post('/getMsgCaptcha', { phone: this.mobile })
      // console.log(res)
      if (res.status === 200) {
        this.$toast({
          message: '验证码已发送，为：' + res.code,
          forbidClick: true,
          duration: 2500
        })
        console.log(res)

        if (!this.isCount) {
        // 开启计时器

          this.timer = setInterval(() => {
            this.isCount = true
            if (this.currentTime <= 0) {
              clearInterval(this.timer)
              this.sumTime = '60'
              this.currentTime = '60'
              this.isCount = false
            } else {
              this.currentTime--
            }
          }, 1000)
        }
      } else if (res.status === 404) {
        this.$toast.fail(res.message)
        this.$router.push({ path: '/register' })
      } else {
        this.$toast.fail(res.message)
      }
    },
    async login () {
      if (this.mobile === '') {
        this.$toast.fail('手机号不能为空')
        return
      }
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.mobile)) {
        this.$toast.fail('请输入正确的手机号')
        return
      }
      if (this.msgCaptcha === '') {
        this.$toast.fail('验证码不能为空')
      }
      const msgCaptchaRegex = /^\d{4}$/
      if (!msgCaptchaRegex.test(this.msgCaptcha)) {
        this.$toast.fail('请输入正确的验证码')
      }
      console.log('登录按钮被点击', this.mobile, this.msgCaptcha)
      const res = await request.post('/phoneLogin', { phone: this.mobile, msgCaptcha: this.msgCaptcha })
      if (res.status === 200) {
        this.$toast.success('登录成功')
        console.log(res)
        this.$store.commit('user/setUserInfo', res) // 更新token

        // 存储用户信息到本地存储
        // localStorage.setItem('userInfo', JSON.stringify(res.data))
        // 重定向到首页
        this.$router.push({ path: '/' })
      } else {
        this.$toast.fail(res.message)
      }
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }

}
</script>
<style>
.login-container {
  margin-top: 20px;
  padding: 0 15px;
  height: 100%;
}

.login-form {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}
.captcha-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.captcha-container input {
  flex: 1; /* 输入框占满剩余空间 */
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.captcha-container .btn1 {
  padding: 8px 15px;
  background-color: #007bff;
  border: none;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px; /* 按钮和输入框之间的间距 */
  transition: background-color 0.3s;
}

.captcha-container .btn1:hover {
  background-color: #0056b3;
}
.btn {
  padding: 10px;
  background-color: #e2b912;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.btn:hover {
  background-color: #0056b3;
}
</style>
